<!--
 * @Author: wanlixin
 * @Date: 2019-10-04 19:41:52
 * @LastEditors: wanlixin
 * @LastEditTime: 2019-10-04 19:41:52
 * @Description: 
 -->
<template>
  <grimm-page type="button-view" title="Select">
    <template slot="content">
      <div disabled>
        <h1 class="example-page-title">基础用法</h1>
        <grimm-select v-model="content" :options="multiList" placeholder="搜索姓名/手机号/房号/订单号" />
        selected：{{content}}
        <h1 class="example-page-title">默认选项</h1>
        <grimm-select v-model="content2" :options="multiList" />
        selected：{{content2}}
      </div>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from 'example/components/GrimmPage.vue';
export default {
  data() {
    return {
      content: '',
      content2: '蚂蚁',
      multiList: [
        { text: '剧毒', value: '剧毒' },
        { text: '蚂蚁', value: '蚂蚁' },
        { text: '幽鬼', value: '幽鬼' },
        { text: '输出', value: '输出' },
        { text: '控制', value: '控制' },
        { text: '核心', value: '核心' },
        { text: '爆发', value: '爆发' },
      ],
    };
  },
  methods: {
    onChangeBefore(vals) {
      return /^\d{0,}$/.test(vals);
    },
  },
  components: {
    GrimmPage,
  },
};
</script>
<style lang="stylus"  scoped>
.example-page-title {
  margin-top: 20px;
}
</style>